var React = require('react');
var token = $.cookie('token');
var mytoken = JSON.parse(token);
import {notification} from 'antd';
const DeliverGoods = React.createClass({
    getInitialState: function () {
        return {orders: []}

    },
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/Order/GetAllOrdersNotShipped",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    _this.setState({orders: data});
                } else {
                    notification.open({message: '操作提示', description: '订单获取失败，请核对登录信息！', placement: 'bottomRight', type: 'warning'});
                }
            },
            error: function (msg) {
                alert(msg);
            }
        });

    },
    componentDidMount: function () {
        var _this = this;
        $('#order-submit').click(function () {
            var id = $('#order-id').html();
            $.ajax({
                type: "Put",
                url: "/api/Order/DeliverGoods",
                headers: {
                    Authorization: "Bearer " + mytoken.access_token
                },
                data: {
                    "": id
                },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.setState({orders: data});
                        $('#deliver-Modal').modal('hide');
                        notification.open({message: '操作提示', description: '操作成功', placement: 'bottomRight', type: 'success'});
                    }

                },
                error: function (msg) {
                    alert("出错了");
                }
            });
        });
    },
    getState: function () {
        return (
            <h5>
                <span className="label label-info">未发货</span>
            </h5>
        )
    },
    setOrderId: function (orderId) {
        $('#order-id').html(orderId);
    },
    getOrders: function () {
        return this
            .state
            .orders
            .map(order => {
                return (
                    <tr key={order.OrderId}>
                        <td>
                            <li
                                className="dropdown"
                                style={{
                                listStyleType: 'NONE'
                            }}>
                                <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                    操作
                                    <b className="caret"></b>
                                </a>
                                <ul className="dropdown-menu">
                                    <li>
                                        <a
                                            data-toggle="modal"
                                            data-target="#deliver-Modal"
                                            onClick={this
                                            .setOrderId
                                            .bind(this, order.OrderId)}>发货</a>
                                    </li>
                                </ul>
                            </li>
                        </td>
                        <td>{order.OrderId}</td>
                        <td>{order.GoodsName}</td>
                        <td>{order.Price}</td>
                        <td>{order.Count}</td>
                        <td>{order.Total}</td>
                        <td className="col-md-2">{order.DeliveryAddress}</td>
                        <td>{order.Consignee}</td>
                        <td>{order.PhoneNumber}</td>
                        <td>{this.getState()}</td>
                        <td>{order.CreateTime}</td>
                        <td>{order.PaymentTime}</td>

                    </tr>
                )
            })
    },
    render() {

        return (
            <div >
                <section className="content-header">
                    <h1>
                        订单中心
                        <small>商品发货</small>
                    </h1>
                    <ol className="breadcrumb">
                        <li>
                            <a href="#">
                                <i className="fa fa-dashboard"></i>
                                Stage</a>
                        </li>
                        <li>
                            <a href="#">商品发货</a>
                        </li>
                        <li className="active">概览</li>
                    </ol>
                </section>
                <br/>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">商品发货</h3>
                        <div className="box-tools pull-right">
                            <span className="label label-primary">订单概览</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <table className="table table-striped">
                            <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>订单编号</th>
                                    <th>商品名称</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>总价</th>
                                    <th>收货地址</th>
                                    <th>收货人</th>
                                    <th>联系电话</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>支付时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {this.getOrders()}
                            </tbody>
                        </table>

                    </div>
                    <div className="box-footer">
                        <div
                            className="modal fade"
                            id="deliver-Modal"
                            tabIndex="-1"
                            role="dialog"
                            aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 className="modal-title" id="myModalLabel">商品发货</h4>
                                    </div>
                                    <div className="modal-body">
                                        <h4>
                                            订单编号为：<span
                                                id="order-id"
                                                style={{
                display: 'inline'
            }}
                                                className="label label-default"></span><br/><br/>您确定要发货？</h4>
                                    </div>
                                    <div className="modal-footer">
                                        <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" className="btn btn-primary" id="order-submit">确认发货</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = DeliverGoods;
